<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">
<h:head>

	<title>TravelDream</title>

	<!-- Approccio mobile first usato da foundation -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />

	<!-- Fogli di stile CSS con il mio foglio di stile dichiarato dopo quelli di foundation per sovrascrivere con modifiche mie-->
	<link rel="stylesheet" href="css/normalize.css" />
	<link rel="stylesheet" href="css/foundation.css" />
	<link rel="stylesheet" href="css/tdStyle.css" />

	<!-- Modernizr -->
	<script src="js/vendor/custom.modernizr.js"></script>
	<!-- Serve a internet explorer 8 poiche non supportato da Foundation 5 -->
	<script>
		Modernizr.load({
    		test: Modernizr.mq('only all'),
    		nope: 'js/vendor/respond.min.js'
		});
	</script>
</h:head>

<h:body>

	<div id="header">

		<div class="large-12columns">
			<div id="logo" class="large-6 columns">
				<a href="home.xhtml"><img src="images/TdWebWorld.png"
					width="150" height="150" alt="" title="" border="0" /></a>
			</div>

			<div class="large-6 columns"
				style="text-align: right; padding: 50px 50px 0px 0px">
				<a href="users/index.xhtml"><h3 style="color: #2f9cc6">login</h3></a>
			</div>
		</div>

		<!-- fine header -->
	</div>

	<div id="main_content" style="padding-top: 45px;">

		<div class="row">
			<div class="large-4 columns">

				<h:form id="srchForm">

					<p:selectOneRadio id="options" value="#{researchBean.selectedProd}"
						style="border: none">
						<f:selectItem itemLabel="Flight" itemValue="flight" />
						<f:selectItem itemLabel="Hotel" itemValue="hotel" />
						<f:selectItem itemLabel="Excursion" itemValue="excursion" />
						<p:ajax update="srchForm" />
					</p:selectOneRadio>



					<p:outputPanel id="researchFormVolo"
						rendered="#{researchBean.selectedProd == 'flight' }">

						<h5>When?</h5>
						<h:outputText value="departure date: " />
						<p:calendar value="#{researchBean.volo.dataInizio}"
							pattern="dd/MM/yyyy" mindate="#{researchBean.today}">
							<p:ajax event="dateSelect" update="researchFormVolo" />
						</p:calendar>

						<h:outputText value="return date: " />
						<p:calendar value="#{researchBean.volo.dataFine}"
							pattern="dd/MM/yyyy" mindate="#{researchBean.volo.dataInizio}" />

						<h5>Where?</h5>
						<h:outputText value="departure city: " />
						<p:inputText id="departureCity"
							value="#{researchBean.volo.citta_partenza}" />

						<h:outputText value="arrival city: " />
						<p:inputText id="arrivalCity"
							value="#{researchBean.volo.citta_arrivo}" />

						<h5>Who?</h5>
						<h:outputText value="guests: " />
						<p:spinner id="minmax" value="#{researchBean.guests}" min="1"
							max="10"
							style="padding: 0px 20px 0px 0px; height: 36px; width: 100%" />


						<h5 style="padding-top: 30px">Flights found:</h5>

						<h:panelGrid id="displayVoli" columns="2" cellpadding="5"
							rendered="#{researchBean.renderVoloList}">

							<p:dataTable var="voloDTO" value="#{researchBean.voloList}"
								paginator="true" rows="10" rowKey="#{voloDTO.id}"
								selection="#{researchBean.volo}" selectionMode="single">

								<p:ajax event="rowSelect" listener="#{researchBean.buySelected}" />

								<p:column headerText="company">
									<h:outputText value="#{voloDTO.compagnia}" />
								</p:column>
								<p:column headerText="departure date">
									<h:outputText value="#{voloDTO.dataInizio}" />
								</p:column>
								<p:column headerText="arrival date">
									<h:outputText value="#{voloDTO.dataFine}" />
								</p:column>
								<p:column headerText="departure city">
									<h:outputText value="#{voloDTO.citta_partenza}" />
								</p:column>
								<p:column headerText="arrival city">
									<h:outputText value="#{voloDTO.citta_arrivo}" />
								</p:column>
							</p:dataTable>

						</h:panelGrid>


						<p:commandButton value="Search" update="researchFormVolo"
							action="#{researchBean.searchVolo()}" style="margin-top: 20px" />

					</p:outputPanel>

					<p:outputPanel id="researchFormHotel"
						rendered="#{researchBean.selectedProd == 'hotel' }">

						<h5>When?</h5>
						<h:outputText value="starting date: " />
						<p:calendar value="#{researchBean.hotel.dataInizio}"
							pattern="dd/MM/yyyy" mindate="#{researchBean.today}">
							<p:ajax event="dateSelect" update="researchFormHotel" />
						</p:calendar>

						<h:outputText value="ending date: " />
						<p:calendar value="#{researchBean.hotel.dataFine}"
							pattern="dd/MM/yyyy" mindate="#{researchBean.hotel.dataInizio}" />

						<h5>Where?</h5>
						<h:outputText value="city: " />
						<p:inputText value="#{researchBean.hotel.citta}" />

						<h5>Who?</h5>
						<h:outputText value="guests: " />
						<p:spinner value="#{researchBean.guests}" min="1" max="10"
							style="padding: 0px 20px 0px 0px; height: 36px; width: 100%" />

						<h:panelGrid id="displayHotels" columns="2" cellpadding="5"
							rendered="#{researchBean.renderHotelList}">

							<p:dataTable var="hotelDTO" value="#{researchBean.hotelList}"
								paginator="true" rows="10" rowKey="#{hotelDTO.id}"
								selection="#{researchBean.hotel}" selectionMode="single">

								<p:ajax event="rowSelect" listener="#{researchBean.buySelected}" />

								<p:column headerText="hotel">
									<h:outputText value="#{hotelDTO.nome}" />
								</p:column>


								<p:column headerText="departure date">
									<h:outputText value="#{hotelDTO.dataInizio}" />
								</p:column>

								<p:column headerText="arrival date">
									<h:outputText value="#{hotelDTO.dataFine}" />
								</p:column>

								<p:column headerText="city">
									<h:outputText value="#{hotelDTO.citta}" />
								</p:column>

							</p:dataTable>

						</h:panelGrid>

						<p:commandButton value="Search" update="researchFormHotel"
							action="#{researchBean.searchHotel()}" style="margin-top: 20px" />

					</p:outputPanel>


					<p:outputPanel id="researchFormEscursione"
						rendered="#{researchBean.selectedProd == 'excursion' }">

						<h5>When?</h5>
						<h:outputText value="date: " />
						<p:calendar value="#{researchBean.escursione.dataInizio}"
							pattern="dd/MM/yyyy" mindate="#{researchBean.today}">
							<p:ajax event="dateSelect" update="researchFormEscursione" />
						</p:calendar>

						<h5>Where?</h5>
						<h:outputText value="city: " />
						<p:inputText value="#{researchBean.escursione.citta}" />

						<h5>Who?</h5>
						<h:outputText value="guests: " />
						<p:spinner value="#{researchBean.guests}" min="1" max="10"
							style="padding: 0px 20px 0px 0px; height: 36px; width: 100%" />

						<h:panelGrid id="displayExcursions" columns="2" cellpadding="5"
							rendered="#{researchBean.renderEscursioneList}">

							<p:dataTable var="escursioneDTO"
								value="#{researchBean.escursioneList}" paginator="true"
								rows="10" rowKey="#{escursioneDTO.id}"
								selection="#{researchBean.escursione}" selectionMode="single">

								<p:ajax event="rowSelect" listener="#{researchBean.buySelected}" />


								<p:column headerText="date">
									<h:outputText value="#{escursioneDTO.dataInizio}" />
								</p:column>

								<p:column headerText="city">
									<h:outputText value="#{escursioneDTO.citta}" />
								</p:column>

								<p:column headerText="time">
									<h:outputText value="#{escursioneDTO.oraInizio}" />
								</p:column>

							</p:dataTable>

						</h:panelGrid>

						<p:commandButton value="Search" update="researchFormEscursione"
							action="#{researchBean.searchEscursione()}"
							style="margin-top: 20px" />

					</p:outputPanel>
				</h:form>
			</div>

			<div class="large-8 columns" style="text-align: right;">

				<a href="register.xhtml"><h4 style="color: #2f9cc6">Register
						now</h4></a>

				<h5 style="color: #2f9cc6">Find your friends and buy the
					perfect gift for them!</h5>

				<a href="giftlistsearch.xhtml"><img src="images/blueGf.jpg"
					border="0" /></a>


			</div>
		</div>

		<div class="row">
			<a href="admins/index.xhtml"><h6 style="color: #2f9cc6">
					admin login</h6></a>
			<h6 style="color: #2f9cc6">contacts</h6>
			<h6 style="color: #2f9cc6">help</h6>
		</div>

		<!-- fine main_content -->
	</div>




	<!-- Foundation adotta come libreria di appoggio jQuery-->
	<script src="/js/vendor/jquery.js"></script>
	<script src="/js/vendor/fastclick.js"></script>
	<!-- Carico librerie javascript, per ora ho caricato intera libreria minimale
	 invece che unicamente i plugin ncessari -->
	<script src="js/foundation.min.js"></script>
	<script src="js/foundation.orbit.js"></script>

	<script>
		$(document).foundation();
	</script>


</h:body>
</html>